<script lang="ts" setup>
import { computed, ref } from 'vue';
import { useSocketStore } from '@/store/modules/socket';
import { useAuthStore } from '@/store/modules/auth';
const value = ref('');
const socketStore = useSocketStore();
const authStore = useAuthStore();
const handleSendMessage = () => {
  console.log('handleSendMessage', value.value);
  socketStore.sendMessage(value.value);
};
const messages = computed(() => socketStore.messages);
const userList = computed(() => {
  return socketStore.onlineUsers.filter(user => user.userId !== authStore.userInfo.userId);
});
</script>

<template>
  <div>
    <div>
      <NInput v-model:value="value" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入消息" />
      <NButton @click="handleSendMessage">发送消息</NButton>
      <NButton @click="socketStore.joinRoom('room1')">加入房间</NButton>
      <NButton @click="socketStore.sendRoomMessage('room1', '你好')">给房间发送消息</NButton>
      <p>{{ messages }}</p>
    </div>
    <ul>
      <li v-for="value in userList" :key="value.userId">{{ value.username }}</li>
    </ul>
  </div>
</template>
